  (function () {
      // 获取元素
      const entry = document.querySelector('.xtx_entry')
      const elevator = document.querySelector('.xtx-elevator')
      // 1. 当页面滚动大于 300像素，就显示 电梯导航
      // 2. 给页面添加滚动事件
      window.addEventListener('scroll', function () {
        // 被卷去的头部大于 300 
        const n = document.documentElement.scrollTop
        elevator.style.opacity = n >= entry.offsetTop ? 1 : 0
      })

      // 点击返回页面顶部
      const backTop = document.querySelector('#backTop')
      backTop.addEventListener('click', function () {
        // 可读写
        // document.documentElement.scrollTop = 0
        // window.scrollTo(x, y)
        window.scrollTo(0, 0)
      })
    })();

    (function () {
        const elevator = document.querySelector('.xtx-elevator-list');

        const news = document.querySelector('.xtx_goods_new');
        const popular = document.querySelector('.xtx_goods_popular');
        const brand =document.querySelector('.xtx_goods_brand');
        const topic =document.querySelector('.xtx_goods_topic');
        
        elevator.addEventListener('click',function (e) {
            if(e.target.tagName === 'A'){
                const goodsName = e.target.dataset.name

                // console.log(news.offsetTop);
                switch(goodsName){
                    case 'news':
                        window.scrollTo(0,news.offsetTop)
                        break;
                     case 'popular':
                        window.scrollTo(0,popular.offsetTop)
                        break; 
                     case 'brand':
                        window.scrollTo(0,brand.offsetTop)
                        break;
                     case 'topic':
                        window.scrollTo(0,topic.offsetTop)
                        break;
                    default:
                        alert('出Bug了')
                }
            }
        })

        window.addEventListener('scroll',function () {
            const n = document.documentElement.scrollTop
            elevator.querySelector('a.active') && elevator.querySelector('a.active').classList.remove('active')
            if (n >= news.offsetTop && n < popular.offsetTop) {
                elevator.querySelector('a[data-name=news]').classList.add('active')
            }else if(n >=popular.offsetTop && n < brand.offsetTop){
                elevator.querySelector('a[data-name=popular]').classList.add('active')
            }else if(n >= brand.offsetTop && n < topic.offsetTop){
                elevator.querySelector('a[data-name=brand]').classList.add('active')
            }else if(n >= topic.offsetTop){
                elevator.querySelector('a[data-name=topic]').classList.add('active')
            }
        })
    })();